<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/vant.css" />
    <link rel="stylesheet" href="./css/katex.min.css">
  </head>

  <body>
    <div id="content" v-cloak>
      <div class="question" v-html="question"></div>

      <div class="tip-wrapper">
        <button class="tip" @click="showTip">
          <van-icon name="info-o" />
          <span>提示</span>
        </button>
        <!-- <van-button
          type="primary"
          round
          size="small"
          color="#4141d2"
          class="tip"
          @click="showTip"
        >
          <van-icon name="info-o" size="12px" />
          提示
        </van-button> -->
      </div>

      <div class="cs">
        <div class="cs-header">
          <img src="./images/cs.png" alt="" />
          <span>常识:</span>
        </div>

        <div v-html="commonSense" class="cs-content"></div>
      </div>

      <div class="tm-tip" v-if="getTipList.length > 0">
        <transition-group tag="div" name="fade-transform" mode="out-in" appear>
          <div
            class="tm-tip-item"
            v-for="(item, index) in getTipList"
            :key="item.id"
          >
            <div
              class="tm-tip-item-header"
              :class="{'not-first-tip-header': index > 0}"
            >
              <img src="./images/tip.png" alt="" />
              <span>提示{{index+1}}</span>
            </div>

            <div class="tm-tip-item-content">
              <div v-html="replaceFontToP(item.hint)"></div>
              <!-- <div v-html="item.hint"></div> -->
            </div>
          </div>
        </transition-group>

        <div v-if="tipIndex < hintVosList.length" class="tm-tip-btn">
          <button class="tip1" @click="showTip">
            <van-icon name="info-o" />
            <span>下一步提示</span>
          </button>
          <!-- <van-button type="primary" round size="small" color="#4141d2" @click="showTip">
            <van-icon name="info-o" size="12px" />
            下一步提示
          </van-button> -->
        </div>
      </div>

      <div v-if="methodologyVoList.length > 0" class="ffl-wrap">
        <img src="./images/ffl.png" class="ffl-img" alt="方法论图表" />
        <div class="ffl">
          本题采用了
          <div class="ffl-item" v-for="(item, idx) in methodologyVoList" :key="item.id" @click="getFflInfo(item)">
            <span>{{item.methodologyName}}</span>
            <span v-if="idx + 1 !== methodologyVoList.length">，</span>
          </div>
          法
        </div>
      </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/validate.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/rem.js"></script>
    <script>
      const parentWindowParams = urlParamsToObject(window.location.search);

      // const baseURL = "http://prod.xiaobaishuxue.cn/xhqh-math-api"
      const baseURL = "http://111.230.46.179:9876/xhqh-math-api"

      const instance = axios.create({
        timeout: 30 * 1000,
        baseURL,
      });

      instance.interceptors.request.use(
        (config) => {
          config.headers = config.headers || {
            "Content-Type": "application/json",
          };
          const { token } = parentWindowParams;
          if (token) {
            config.headers.token = `${token}`;
          }

          return config;
        },
        (error) => {
          Promise.reject(error);
        }
      );

      const API = {
        getById: "/question/getById",
      };

      // 根据id获取详情
      function getById(id) {
        return instance.get(API.getById, { params: { questionId: id } });
      }

      function onClickKnowlege(id, chapterId) {
        app.$options.methods.getZsdInfo(id, chapterId);
      }
      const app = new Vue({
        el: "#content",
        data: {
          // 常识
          commonSense: "",
          // 题目
          question: "",
          // 方法论
          methodologyVoList: [],
          // 提示列表
          hintVosList: [],

          tipIndex: 0,

          replaceFontToP,
        },
        computed: {
          getTipList(state) {
            return state.hintVosList.slice(0, state.tipIndex) || [];
          },
        },
        mounted() {
          console.log("parentWindowParams :>> ", parentWindowParams);
          if (parentWindowParams.id && parentWindowParams.token) {
            this.initDataSource(Number.parseInt(parentWindowParams.id));
          }
        },
        methods: {
          async initDataSource(id) {
            const res = await getById(id);
            if (res.data && res.data.code === 200) {
              const {
                data: { data },
              } = res;
              // console.log('data.question', replaceFontToP(data.question));
              this.question = this.replaceFontToP(data.question);
              console.log('this.question', this.question);
              // this.question = data.question;
              this.commonSense = data.commonSense;
              this.methodologyVoList = data.methodologyVoList || [];
              this.hintVosList = data.hintVosList || [];
              console.log("data :>> ", data);
            }
          },

          getZsdInfo(id, chapterId) {
            console.log("id, chapterId :>> ", id, chapterId);
            OnClickKnowledge.postMessage(
              JSON.stringify({
                knowledgeId: id,
                chapterId,
              })
            );
          },

          getFflInfo(item) {
            console.log('item', item);
            OnClickFfl.postMessage(`${item.id}`)
          },

          showTip: debounce(
            function () {
              if (this.tipIndex >= this.hintVosList.length) {
                vant.Toast("已经是最后一条提示了~");
                return;
              }
              this.tipIndex++;
              OnClickTips.postMessage("" + this.tipIndex)
            },
            400,
            true
          ),
        },
      });
    </script>
  </body>
</html>
